<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            账号<input type="text" v-model ='user.name'></br>
            密码<input type="text" v-model ='user.pass'></br>

            显示<p>{{result}}</p>

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    user : {
                        name : '',
                        pass : '',
                    },
                },
                computed : {
                    result(){
                        console.log('11')
                        // 无法响应异步操作的变化
                        // setTimeout(() => {
                        //     console.log(this.user.name.trim().toLowerCase() +'---'+this.user.pass.trim().toLowerCase())
                        // }, 100);
                        return this.user.name.trim().toLowerCase() +'---'+this.user.pass.trim().toLowerCase()
                        
                    },
                }
            })
        </script>
    </body>
</html>